iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Modern Web

使用Gatsby督促我的姊姊成為部落客!!!系列 第 7

Day 07 - 研究讀取 markdown 的設定

  • 分享至 

  • xImage
  •  

之前姊挑的樣板,是讀取 md 檔

以下是 gatsby-node.js

const path = require('path');

exports.createPages = ({ graphql, actions}) => {
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    resolve(
      graphql(
        `
          {
            allPosts: allMarkdownRemark(
            filter: {frontmatter: {type: {eq: "post"}}},
            sort: {fields: frontmatter___date, order: DESC},
            ) {
              edges {
                node {
                  frontmatter {
                    slug
                  }
                }
              }
              group(field: frontmatter___category) {
                fieldValue
                edges {
                  node {
                    frontmatter {
                      slug
                    }
                  }
                }
              }
            }
          }
        `
      ).then(result => {
        if (result.errors) {
          reject(result.errors)
        }
        const allPosts = result.data.allPosts.edges;
        const groupedPosts = result.data.allPosts.group;
        const paginationTemplate = path.resolve('src/blog/index.js');
        const postsPerPage = 10;
        let numPages = Math.ceil(allPosts.length / postsPerPage);

        // Creating the main blog index
        Array.from({ length: numPages }).forEach((_, i) => {
          createPage({
            path: i === 0 ? '/blog' : `/blog/${i + 1}`,
            component: paginationTemplate,
            context: {
              limit: postsPerPage,
              skip: i * postsPerPage,
              nextPage: `/blog/${i + 2}`,
              pageNumber: i + 1,
            }
          })
        })

        // Creating all category pages.
        let category;
        let categoryPosts;
        const categoryTemplate = path.resolve('src/blog/category.js');
        groupedPosts.forEach((group, _) => {
          category = group.fieldValue;
          categoryPosts = group.edges;
          numPages = Math.ceil(categoryPosts.length / postsPerPage);
          Array.from({ length: numPages }).forEach((_, i) => {
            createPage({
              path: i === 0 ? `/${category}` : `/${category}/${i + 1}`,
              component: categoryTemplate,
              context: {
                limit: postsPerPage,
                skip: i * postsPerPage,
                nextPage: `/${category}/${i + 2}`,
                pageNumber: i + 1,
                category: category,
              }
            })
          })
        })

        // Create all the blog post pages.
        const template = path.resolve('src/blog/post.js');
        allPosts.forEach(({ node }) => {
          let slug = node.frontmatter.slug;
          createPage({
            path: slug,
            component: template,
            context: {
              slug,
            }
          })
        })
      })
    )
  })
}

之後再詳細研究的心得


上一篇
Day 06 - 解決 404 not fount on root URL
下一篇
Day 08 -當 wordpress 內容更新,重新 build Gastby
系列文
使用Gatsby督促我的姊姊成為部落客!!!13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言